<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./fonticon/iconfont.css">
    <style>
        .icon{
            font-size: 35px;
            color: aqua;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 
    我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况
    而且图片数量很多的话，页面加载就越慢，所以，我们可以使用字体图标的方式
    来显示图标，既解决了失真的问题，也解决了图片占用资源问题

    常用的字体图标库：阿里字体图标库

    优点:轻量性：加载速度快，减少http请求
         灵活性：可以利用CSS设置大小颜色等
         兼容性：页面字体支持所有现代浏览器，包括ie低版本

    -->
    <span class="iconfont icon-home_alt_outline icon"></span>
    <span class="iconfont icon-user_circle icon"></span>
</body>

</html>